<template>
  <div class="box-border bg-blue-100 p-10">
    <!-- excel转json -->
    <n-button @click="uploadFile" type="info" class="block">点击上传excel文件</n-button>
    <div v-if="fileJson.length" class="my-6 rounded-lg border border-solid border-black p-4">
      {{ JSON.stringify(fileJson) }}
    </div>
    <n-button @click="downloadJson" type="success" v-if="fileJson.length">下载Json</n-button>

    <!-- json转excel -->
    <n-button type="error" @click="uploadJson" class="block my-3">上传Json</n-button>
    <n-button type="warning" @click="downloadFile" v-if="jsonFile.length" class="block">下载excel</n-button>

    <!-- electron相关 -->
    <n-button type="success" @click="minWindow" class="block my-3">最小化窗口</n-button>
    <n-button type="warning" @click="maxWindow" class="block my-3">最大化窗口</n-button>
    <n-button type="info" @click="closeWindow" class="block my-3">关闭窗口</n-button>
  </div>
</template>

<script setup lang="ts">
import { useMessage } from 'naive-ui'
import * as XLSX from 'xlsx' // 导入xlsx插件
const message = useMessage()

console.log('展示了')
// file转换成json
const fileJson = ref<object[]>([])
const fileName = ref<string>('')
// 文件上传并解析成json
const uploadFile = () => {
  const input = document.createElement('input')
  input.type = 'file'
  input.accept = '.xlsx'
  input.style.display = 'none'
  input.onchange = e => {
    // @ts-ignore
    const file = e.target!.files[0]
    // 文件名
    fileName.value = file.name.split('.')[0]

    const reader = new FileReader()
    reader.readAsBinaryString(file)
    reader.onload = e => {
      const data = e.target!.result
      const workbook = XLSX.read(data, { type: 'binary' })
      const sheetNames = workbook.SheetNames
      const sheet = workbook.Sheets[sheetNames[0]]
      const json = XLSX.utils.sheet_to_json(sheet)
      fileJson.value = json as object[]
      message.success('excel转换成功')
    }
  }
  input.click()
}
// 下载json到.txt
const downloadJson = () => {
  const json = fileJson.value
  const jsonStr = JSON.stringify(json)
  const blob = new Blob([jsonStr], { type: 'text/plain;charset=utf-8' })
  const a = document.createElement('a')
  a.download = fileName.value + '.txt'
  a.href = URL.createObjectURL(blob)
  a.click()
  URL.revokeObjectURL(a.href)
  message.success('Json文件已下载成功')
}

// json转换成file
const jsonFile = ref<object[]>([])
const jsonName = ref<string>('')
// 上传json文件
const uploadJson = () => {
  const input = document.createElement('input')
  input.type = 'file'
  input.accept = '.txt'
  input.style.display = 'none'
  input.onchange = e => {
    // @ts-ignore
    const file = e.target!.files[0]
    // 文件名
    jsonName.value = file.name.split('.')[0]
    const reader = new FileReader()
    reader.readAsText(file)
    reader.onload = e => {
      const data = e.target!.result
      // 判断是否为json
      try {
        const json = JSON.parse(data as string)
        jsonFile.value = json as object[]
        message.success('json转换成功')
      } catch (error) {
        message.error('json格式错误,请检查文件')
        return
      }
    }
  }
  input.click()
}
// 下载json转为excel
const downloadFile = () => {
  const excel = XLSX.utils.json_to_sheet(jsonFile.value)
  const workbook = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(workbook, excel, jsonName.value)
  XLSX.writeFile(workbook, jsonName.value + '.xlsx')
  message.success('excel文件已下载成功')
}

//最小化窗口
const minWindow = () => {
  window.electron.ipcRenderer.send('min')
}

// 最大化窗口
const maxWindow = () => {
  window.electron.ipcRenderer.send('max')
}

// 关闭窗口
const closeWindow = () => {
  window.electron.ipcRenderer.send('close')
}
</script>

<style lang="less" scoped></style>
